<!-- 字典管理 -->
<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { Delete, Plus, Search,Refresh,EditPen,Pointer } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/http'
// 分页
import type { ComponentSize } from 'element-plus'
let PageNum = ref(1)
let pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const tableData=ref ([])
// 科室名称：
let name = ref('')
// 创建时间
let date = ref('')
// 状态：
let status = ref(0)
let options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
]
// 字典类型
let type = ref('')
// 总条数
let total=ref(0)
// 查询字典
// const getPage=()=>{
//    //带用户名条件、当前页、每页条数的参数值
//    http.get('/user/getUsers', {
//     params: {
//       pageNum: PageNum.value,
//       pageSize: pageSize.value,
//       name: name.value,
//       type: type.value,
//       status :status.value,
//       date: date.value,
//     }
//   }).then((res) => {
//     console.log(res)
//     tableData.value = res.list
//     total.value = res.total
//   })
// }
// 窗体加载事件
onMounted(() => {
//   getPage()
})


// 添加
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    id:'',
  name: '',
  type: '',
  status:'',
  remark: '',
  noticeType :'',
})
const addDict=()=>{

}
// 修改
// 修改按钮
const handleEdit = async(index: number, row) => {
    
}
const upadte=()=>{

}
//删除
const handleDelete = async(index: number, row) => {
    
}
//查看按钮
const selectNotice=async(index: number,row)=>{

}
// 删除
const open = () => {
  ElMessageBox.confirm(
    '你是否删除编号为  的公告?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
// 清空
const open1 = () => {
  ElMessageBox.confirm(
    '你是否清空登录日志信息?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
const datele=()=>{

}
let dialogupdate=ref(false)
</script>

<template>
    <!-- 头部搜索 -->
    <el-row>
    <el-col :span="24">
        用户名称：<el-input v-model="name" style="width: 140px" placeholder="Please input" /> 
        用户账号：<el-input v-model="type" style="width: 140px" placeholder="Please input" />
        IP地址：<el-input v-model="name" style="width: 140px" placeholder="Please input" /> 
        登录状态：  <el-select
    v-model="status"
    clearable
    placeholder="字典状态"
    style="width: 140px"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>  
 登录类型：<el-select
    v-model="status"
    clearable
    placeholder="字典状态"
    style="width: 140px"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>  
  创建时间： 
        <el-date-picker
          v-model="date"
          type="week"
          format="[Week] ww"
          placeholder="Pick a week"
        />
        <el-button :icon="Search" type="primary">搜索</el-button> <el-button :icon="Refresh" type="primary">重置</el-button>
    </el-col>
  </el-row>
  <!-- 清空 删除 -->
  <el-row>
    <el-col :span="14"> 
        <el-button :icon="Delete" type="danger" @click="open" plain>删除</el-button>
        <el-button :icon="Pointer" type="warning" @click="open1">清空</el-button>
    </el-col>
  </el-row>
  <!--  主体内容-->
  <el-row>
    <el-col :span="24"> 
    <el-table :data="tableData.list" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column label="日志ID" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="公告标题" label="用户姓名" width="120" />
    <el-table-column property="公告类型" label="登录账号" width="140" show-overflow-tooltip/>
    <el-table-column property="状态" label="IP" width="140"  />
    <el-table-column property="创建者" label="登录地址" width="120" />
    <el-table-column property="创建时间" label="浏览器" width="140" show-overflow-tooltip/>
    <el-table-column property="状态" label="操作系统" width="140" />
    <el-table-column property="创建者" label="用户类型" width="120" />
    <el-table-column property="创建时间" label="登录时间" width="140" show-overflow-tooltip/>
    <el-table-column label="操作">
      <template #default="scope">
<!-- 删除 -->
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          <el-icon>
            <Delete />
          </el-icon> 删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="PageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1,2,3]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    </el-col>
  </el-row>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

